<template>
	<view>
		<view class="box">
			<view class="nav">
				<image class="c_img" :src="avatarUrl"></image>
				<view class="c_name">{{associationDetail.name}}</view>

			</view>
			<view style="width: 100%; background: #f3f3f3; text-align: center;">
				<image class="indeximg" :src="bgImg">
				</image>
			</view>
		</view>
		<view style="padding: 0 10upx;">
			<view class="iconnav">
				<view class="iconitem" @click="$Router.push({name:'club_detail',params:{id:associationDetail.id}})">
					<u-icon class="icon_i" name="order" color="#ff0000" size="100"></u-icon>
					<view class="icon_t">简介</view>
				</view>

				<view class="iconitem" @click="alumniMember(associationDetail.id)">
					<u-icon class="icon_i" name="group-fill" custom-prefix="custom-icon" color="#ff0000" size="100">
					</u-icon>
					<view class="icon_t">成员</view>
				</view>

				<view class="iconitem" @click="findAlumni()">
					<u-icon class="icon_i" name="map-fill" color="#ff0000" size="100"></u-icon>
					<view class="icon_t">发现</view>
				</view>

				<view class="iconitem" @click="alumniPhoto(associationDetail.id)">
					<u-icon class="icon_i" name="photo" color="#ff0000" size="100"></u-icon>
					<view class="icon_t">相册</view>
				</view>
			</view>
		</view>
		<view class="br"></view>
		<view class="new_top_box">
			<!-- @click="toxinx(associationDetail.id)" -->
			最新咨询
			<u-icon @click="toMore(briefId)" class="icon" size="40" name="more-dot-fill"></u-icon>
		</view>
		<view class="br"></view>

		<view v-if="messageDetail.length >0">
			<view v-for="detail in messageDetail" :key="detail.id">
				<view class="newbox" @click="todetail(detail.id)">
					<view class="new_title">
						{{detail.titleName.length>10 ? detail.titleName.substring(0,10)+'......' : detail.titleName}}
					</view>
					<view class="new_time" v-text="formatDate(detail.create_time)"></view>
				</view>
			</view>
			<view class="br" style="height: 4upx;"></view>
		</view>
		<view v-else class="t1">暂无校友会资讯，敬请期待!!!</view>
		<view style="width: 100%; height: 40upx;"></view>
		<u-button :custom-style="{width:'400rpx'}" @click="toJoin(associationDetail.id)" type="error" v-if="userInfoId==0">申请加入</u-button>
		<u-button :custom-style="{width:'400rpx'}" @click="toJoin(associationDetail.id)" type="error" v-else>退出群组</u-button>
		<view style="width: 100%; height: 100upx;"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Vue from "vue"
	import {
		getQueryAssociationById,
		getQueryAlumniNews,
		getQueryUserInfo,
		addUserInfo,
		deleteUserInfo
	} from "@api"
	export default {
		name: "alumni_club",
		data() {
			return {
				avatarUrl: this.$t.URL.image + 'xiaohui.png',
				bgImg: this.$t.URL.image + 'xiaoyouhui.jpg',
				associationDetail: null, //某个校友会详情
				associationId: '', //校友会id
				briefId: '', //传到简介页面的校友会id
				joinId: '', //传到我的页面的用户id
				messageId: '', //传入信息页面的用户id
				entityId: '', //传入活动页面的id
				messageDetail: [], //校友会资讯
				detailId: '', //传入信息页面的校友会id
				activityList: '', //校友会活动
				activityId: '', //活动id
				userInfoId: 0 ,//是否加入校友会的标志
				userInfo: {}
			}
		},
		computed: {
			...mapState(['USER'])
		},
		//获取上一页面传的校友会id，查询校友会的信息
		onLoad(option) {
			let that = this;
			that.briefId= option.id;
			let briefId = option.id;
			that.userInfo = that.USER.userInfo;
			//进入详情页就查询详情信息
			getQueryAssociationById({
					id: briefId
				})
				.then(res => {
					that.associationDetail = res;
					if (res.avatarUrl != null && res.avatarUrl != '') {
						that.avatarUrl = that.$t.URL.image + res.avatarUrl;
					}
					if (res.bgImg != null && res.bgImg != '') {
						that.bgImg = that.$t.URL.image + res.bgImg;
					}
					//that.$isResolve()
				})
			that.queryAlumniNews(briefId);
			that.queryUserInfo(briefId);
			that.$onLaunched;
		},
		methods: {
			//查询校友会成员
			queryUserInfo(id) {
				var that = this;
				getQueryUserInfo({
						assId: id,
						userId: that.userInfo.id
					})
					.then(res => {
						that.userInfoId = res.id;
					})
			},
			//查询校友会资讯
			queryAlumniNews(id) {
				getQueryAlumniNews({
						id: id,
						page: 0,
						size: 2
					})
					.then(res => {
						this.messageDetail = res;
					})
			},
			//跳转到活动详情页面
			toactivity(id) {
				uni.navigateTo({
					url: '../home/Edetail?id=' + id
				})
			},
			//跳转到校友会成员
			alumniMember(id) {
				if (this.userInfoId > 0) {
					this.$Router.push({
						name: 'alumni_member',
						params: {
							id: id
						}
					})
				} else {
					uni.showToast({
						title: '请先加入该校友会！！',
						icon: 'none',
						duration: 2000
					});
				}

			},
			//跳转到发现校友页面
			findAlumni() {
				if (this.userInfoId > 0) {
					this.$Router.push({
						name: 'club_map'
					})
				} else {
					uni.showToast({
						title: '请先加入该校友会！！',
						icon: 'none',
						duration: 2000
					});
				}
			},
			//跳转到校友会相册页面
			alumniPhoto(id) {
				if (this.userInfoId > 0) {
					this.$Router.push({
						name: 'club_photo',
						params: {
							id: id
						}
					})
				} else {
					uni.showToast({
						title: '请先加入该校友会！！',
						icon: 'none',
						duration: 2000
					});
				}
			},
			//跳转到信息详情页面
			todetail(id) {
				if (this.userInfoId > 0) {
					uni.navigateTo({
						url: 'pages/home/pages/information/information?id=' + id
					})
				} else {
					uni.showToast({
						title: '请先加入该校友会！！',
						icon: 'none',
						duration: 2000
					});
				}
			},
			//跳转到活动页面
			toentity(id) {
				uni.navigateTo({
					url: '../home/entity?id=' + id
				})
			},
			toJoin(id) {
				let that = this;
				if (that.userInfoId > 0) {
					uni.showModal({
						title: '提示',
						content: '确定退出吗？',
						success: function(res) {
							if (res.confirm) {
								deleteUserInfo({
										id: that.userInfoId
									}).then(res=>{
										that.userInfoId = 0;
										console.log("toDelete", res);
										uni.showToast({
											title: "成功退出该行会",
											icon: 'none',
											duration: 2000
										});
									})							
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					if (this.USER.token == 1 || this.USER.token == 2) {
						uni.showToast({
							title: "加入校友会需要实名认证哦！",
							icon: 'none',
							duration: 2000
						});
						return;
					}
					
					addUserInfo({
							associationId: id,
							userId: that.userInfo.id,
							name: that.userInfo.username,
							type: that.userInfo.wxNickName
						}).then(res=>{
						that.userInfoId = res.id;
						if (that.userInfoId > 0) {
							uni.showToast({
								title: "加入行会成功！",
								icon: 'none',
								duration: 2000
							});
						}
					})
				}

			},
			/* 更多新闻 */
			toMore(assId) {
				this.$Router.push({
					name: 'newsList',
					params: {
						type: 2,
						assId:assId
					}
				})
			},
			//日期转换方法
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '.' + MM + '.' + d;
			},
			//日期转换方法
			formatDate1(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '-' + MM + '-' + d;
			}
		}
	}
</script>


<style>
	.box {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.nav {
		margin-top: 10upx;
		display: flex;
		height: 110upx;

	}

	.c_img {
		margin-left: 20upx;
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
	}

	.c_name {
		margin-left: 20upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 48upx;
		font-weight: bold;
	}

	.indeximg {
		margin: 0 auto;
		padding: 10upx;
		height: 320upx;
	}

	.iconnav {
		margin-top: 10upx;
		width: 100%;
		display: flex;
	}


	.iconitem {
		text-align: center;
		flex: 1;
		margin: 0 auto;
		width: 100upx;
		height: 160upx;
		border-radius: 10upx;
	}

	.iconitem:active {
		background: rgba(0, 0, 0, 0.1);
	}

	.icon_i {
		margin-top: 10upx;
		width: 100upx;
		height: 100upx;
	}

	.icon_t {
		margin-top: 10upx;
		text-align: center;
		font-size: 24upx;
		height: 20upx;
		line-height: 20upx;
	}

	.br {
		width: 100%;
		height: 10upx;
		background: #f7f7f7;
	}

	.new_top_box {
		position: relative;
		padding-left: 30upx;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		font-size: 34upx;
	}

	.icon {
		position: absolute;
		top: 30upx;
		right: 40upx;
	}

	.newbox {
		display: flex;
		margin: 10upx 0;
		padding: 0 30upx;
		width: 100%;
		height: 80upx;
	}

	.newbox:active {
		background: #e7e7e7;
	}

	.new_title {

		flex: 3;
		color: #55aaff;
		line-height: 80upx;
		font-size: 34upx;
	}

	.new_time {
		line-height: 100upx;
		color: #55aaff;
		font-size: 24upx;
		margin-right: 10upx;
	}

	.t1 {
		padding-bottom: 100rpx;
		margin-top: 100rpx;
		text-align: center;

	}
</style>
